<html>
{#{% load poll_extras %}#}
<head>
</head>
<link rel="stylesheet" href="/static/package/bootstrap-3.3.7-dist/css/bootstrap.min.css"  >
<style>
    .input-group{
        width: 80%
    }
    .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
        margin-left: 50px
    }
    .hr-box {
        position: relative;
        padding-top: 10px;
    }
    .hr-pos {
        position: absolute;
        left: 50%;
        width: 200px;
        height: 20px;
        margin-left: -520px;
        color: #DDDDDD;
    }
    .div-con-span{
        background: #FFFFFF;
        border-style: solid;
        border-collapse:collapse;
        border-color: #00DD77 #DDDDDD #DDDDDD #DDDDDD;
        border-width: 6px 0.5px 0.5px 0.5px;
        margin-top:10px;
    }
    .div-con-span .row div{
       margin: 10px 0;
    }
    .div-con-span .span-label{
        color:#DDDDDD;
    }
    .pagination>li:first-child>a, .pagination>li:first-child>span{
        border-radius: 50%;
    }
    .pagination>li:last-child>a, .pagination>li:last-child>span{
        border-radius: 50%;
    }
    .pagination>li>a, .pagination>li>span{
        border-radius: 50%;
        margin: 5px;
        background-color: #3c3c3c;
        color: #c4e3f3;
    }
</style>
<body>
<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Company Information</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">start</span>
    <input type="text" class="form-control" placeholder="name" name="basic-addon1" aria-describedby="basic-addon1">
    <span class="input-group-addon" id="basic-addon2">end</span>
    <input type="text" class="form-control" placeholder="long name" name="basic-addon2" aria-describedby="basic-addon2">
    <span class="input-group-btn">
	        <button type="button" class="btn btn-danger  btn-sm input-inline-search" onclick="fn.search()">search</button>
		</span>
</div>
<div class="container-fluid div-con-span">
    <div class="row">
        <div class="col-xs-6 col-md-4" name="span-first-name"><span class="span-label">first-name:</span>{{ one.name }}</div>
        <div class="col-xs-6 col-md-4" name="span-first-no"><span class="span-label">first-no:</span>{{ one.no }}</div>
        <div class="col-xs-6 col-md-4" name="span-first-photo"><span class="span-label">first-photo:</span><u><a>{{ one.photo }}</a></u></div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4" name="span-two-name"><span class="span-label">two-name:</span>{{ two.name }}</div>
        <div class="col-xs-6 col-md-4" name="span-two-no"><span class="span-label">two-no:</span>{{ two.no }}</div>
        <div class="col-xs-6 col-md-4" name="span-two-photo"><span class="span-label">two-photo:</span><u><a>{{ two.photo }}</a></u></div>
    </div>

</div>

<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Sentiment Analytics</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>
<div id="main" style="width: 100%;height: 400px;"></div>
<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon  glyphicon-align-left" aria-hidden="true"></span>News lists</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>
<!--分页表单-->
<table class="table">
    <thead>
    <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody id="demo_tbody">
    {% for x in map %}
        <tr>
            <td>{{ x.name }}</td>
            <td>
                <button type="button" class="btn btn-primary  btn-xs" data-toggle="collapse"
                        data-target="#demo-{{ x.no }}">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
                {{ x.motto }}
                <div id="demo-{{ x.no }}" class="collapse">
                    {{ x.intro }}
                </div>
            </td>
            <td>{{ x.photo }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<nav aria-label="Page navigation" style="float:right ">
    <ul class="pagination" id="nav-page">
{% if map.has_previous %}
    <li>
        <a href="javascript:void(0);" onclick="fn.page({{ map.previous_page_number }})" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
{% endif %}
{% for pg in map.paginator.page_range %}
    {% if  map.number == pg %}
        <li class="active"><a href="javascript:void(0);" onclick="fn.page({{ pg }})">{{ pg }}</a></li>
    {% else %}
        <li ><a  href="javascript:void(0);" onclick="fn.page({{ pg }})">{{ pg }}</a></li>
    {% endif %}
{% endfor %}
{% if map.has_next %}
    <li>
        <a  href="javascript:void(0);" onclick="fn.page({{ map.next_page_number }})" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
{% endif %}
    </ul>
</nav>
</body>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery-3.4.0.min.js" ></script>
<script src="/static/js/jquery.cookie.js" ></script>
<script src="/static/package/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var title = '折柱混合';
    var kv = new Array();//声明一个新的字典
    kv = {{ list|safe }};//取出后台传递的数据，此处添加safe过滤避免警告
    option = {
        title:{
            text:title
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    opacity: 0
                }
            },
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
    };
    option.series=[];
    option.legend={};
    var arr= new Array();
    for (let i = 0; i < kv.length; i++) {
        arr.push(kv[i].name);
        option.series[i]={
            name:kv[i].name,
                type:'bar',
                data:kv[i].data
        }
    }
    option.legend.data=arr;
    myChart.setOption(option);

    //js方法
    var fn = {
        //检索框方法
        search : function () {
            //检束第一条记录
            var u_name=$("input[name='basic-addon1']").val();
            //检束第二条记录
            var long_name=$("input[name='basic-addon2']").val();

            $.ajax({
                   'url': '/demo/search',
                   'type': 'post',
                   'headers':{"X-CSRFToken":$.cookie('csrftoken')},
                   'data': { 'u_name':u_name,'long_name':long_name },
                   'dataType': 'json',
                   'success': function(json) {
                       for (let i = 0; i < json.length; i++) {
                            fn.hang_assignment(json[i])
                       }
                   }
               });
        },
        //search赋值方法
        hang_assignment:function (obj) {
            var ys = obj.zt==0?'span-first-':'span-two-';
            console.log(ys+"name");
            $("div[name='"+ys+"name']").html('<span class="span-label">first-name:</span>'+obj.name);
            $("div[name='"+ys+"no']").html('<span class="span-label">first-no:</span>'+obj.no);
            $("div[name='"+ys+"photo']").html('<span class="span-label">first-photo:</span><u><a>'+obj.photo+'</u></a>');
        },
        //分页方法
        page: function (num) {
            $.ajax({
                   'url': '/demo/listPage?page='+num,
                   'type': 'get',
                   'dataType': 'json',
                   'success': function(json) {
                       console.log(json);//带有page的分页
                       fn.table_render(json);
                       fn.navPage(json[0]);
                   },'error':function (c) {
                    console.log(c)
                }
               });
        },
        //页面渲染
        table_render:function (obj) {
            var tbody = $('#demo_tbody');
            var html='';
            //集合第一个值是分页 所以从1开始
            for(let i=1;i<obj.length;i++){
                html+='<tr><td>'+obj[i].name+'</td>'; //第一列
                html+='<td><button type="button" class="btn btn-primary  btn-xs" data-toggle="collapse" data-target="#demo-'+obj[i].no+'"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>';//第二列
                html+=obj[i].motto+'<div id="demo-'+obj[i].no+'" class="collapse">'+obj[i].intro+'</div></td>';//第二列终
                html+='<td>'+obj[i].photo+'</td>\n' +
                    '                </tr>';//第三列
            }
            tbody.empty();
            tbody.html(html);
        },
        //分页下标渲染 obj为需要的字段
        navPage:function (obj) {
            var p=parseInt(obj.page);//当前页数
            var range=parseInt(obj.range);//总页数
            var $nav=$('#nav-page');
            var html='';
            if(p>1){
                var previous=p-1;
                html+='<li><a href="javascript:void(0);" onclick="fn.page('+previous+')" aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>';//上一页符号
            }
            if(range>0){
                for (let i = 1; i < range+1; i++) {
                   html+= p==i?'<li class="active">':'<li >';//判断是否当前页面
                   html+= '<a href="javascript:void(0);" onclick="fn.page('+i+')">'+i+'</a></li>';
                }
            }
            if(p<range){
                var next=p+1;
                html+='<li><a href="javascript:void(0);" onclick="fn.page('+next+')" aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>';//下一页符号
            }
            $nav.empty();
            $nav.html(html);
        }
    }
</script>
</html>